<template>
  <el-row :gutter="10">
    <el-col :span="12">
      <el-card>
        <template #header>
          问卷调查基础内容
        </template>
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
          <el-form-item label="问卷调查名称" prop="name">
            <el-input
              :readonly="!isOperable"
              v-model="form.name"
              placeholder="请输入问卷调查名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
              :readonly="!isOperable"
              type="datetime"
              placeholder="选择日期"
              v-model="form.beginTime"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              :readonly="!isOperable"
              type="datetime"
              placeholder="选择日期"
              v-model="form.endTime"
              format="yyyy年MM月dd日"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <template v-if="form.publishStatus !== 'FINISH'">
              <el-button
                type="primary"
                v-if="form.publishStatus !== 'PUBLISH'"
                @click="submitForm"
                >保存</el-button
              >
              <el-button
                type="success"
                v-if="form.publishStatus && form.publishStatus == 'SAVE'"
                @click="updateStatus('PUBLISH')"
                >发布</el-button
              >
              <el-button
                type="warning"
                v-if="form.publishStatus && form.publishStatus == 'PUBLISH'"
                @click="updateStatus('SAVE')"
                >下架</el-button
              >
              <el-button
                type="danger"
                v-if="form.publishStatus"
                @click="updateStatus('FINISH')"
                >完结</el-button
              >
            </template>
            <el-button @click="back">
              返回
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <template #header>
          问卷调查选项内容
        </template>
        <template v-for="(i, k) in form.questionList">
          <question
            :questionList="i"
            :index="k"
            :key="i.seq"
            :publishStatus="form.publishStatus"
            @delQuestion="delQuestion"
          ></question>
        </template>
        <div style="text-align:center">
          <el-button
            type="primary"
            v-if="
              form.publishStatus !== 'PUBLISH' &&
                form.publishStatus !== 'FINISH'
            "
            @click="addQuestion"
            >新增问题</el-button
          >
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import question from "./question.vue";
export default {
  name: "questionnaireDetail",
  components: {
    question
  },
  props: {
    questionData: {
      type: Object
    }
  },
  created() {
    if (this.questionData.id) {
      this.form = this.questionData;
    }
  },
  computed: {
    isOperable() {
      let { publishStatus } = this.questionData;
      if (publishStatus == "PUBLISH" || publishStatus == "FINISH") {
        return false;
      } else {
        return true;
      }
    }
  },
  data() {
    return {
      form: {
        name: "",
        beginTime: "",
        endTime: "",
        questionList: [
          {
            optionList: [],
            content: "",
            type: "FILL",
            seq: 1
          }
        ]
      },
      rules: {
        name: [{ required: true, message: "请输入问题名称", trigger: "blur" }],
        beginTime: [
          { required: true, message: "请选择开始时间", trigger: "change" }
        ],
        endTime: [
          { required: true, message: "请选择结束时间", trigger: "change" }
        ]
      }
    };
  },
  methods: {
    // 保存&编辑表单
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.$confirm("确认保存?", "提示", {
            type: "warning"
          }).then(() => {
            let body = this.form;
            body.publishStatus = "SAVE";
            this.API.addOrUpdateQuestionnaire({ body }).then(ret => {
              this.success("保存成功!");
              this.$refs["form"].resetFields();
              this.$emit("getData");
              this.back();
            });
          });
        } else {
          return false;
        }
      });
    },
    // 更改状态
    updateStatus(status) {
      this.$confirm(`确认${this.publishStatusTxt(status)}?`, "提示", {
        type: "warning"
      }).then(() => {
        let id = this.questionData.id;
        this.API.updatePublishById({ id, status }).then(ret => {
          this.success("操作成功!");
          this.$emit("getData");
          let { publishStatus } = ret.data;
          this.form.publishStatus = publishStatus;
          // this.back();
        });
      });
    },
    // 设置文本
    publishStatusTxt(status) {
      let txt = "";
      switch (status) {
        case "PUBLISH":
          txt = "发布";
          break;
        case "SAVE":
          txt = "保存";
          break;
        case "FINISH":
          txt = "完结";
          break;
      }
      return txt;
    },
    // 返回列表页
    back() {
      this.$emit("back");
    },
    // 新增问题
    addQuestion() {
      let seq = this.form.questionList.length + 1;
      this.form.questionList.push({
        optionList: [],
        content: "",
        type: "FILL",
        seq
      });
    },
    // 删除问题
    delQuestion(index) {
      this.form.questionList.splice(index, 1);
    }
  }
};
</script>
